<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>第一个JSP程序</title>
    <style>
        #dialog {
            height: 400px;
            width: 400px;
            border: 6px solid #ccc;
            position: fixed;
            z-index: 100;
            left: 50%;
            margin-left: -200px;
            top: 100px;
            display: none;
        }

        #dialog h1.title {
            font-size: 12px;
            margin: 0px;
            padding: 0px;
            height: 30px;
            background: #dfd;
        }

        #dialog h1 span {
            font-weight: normal;
            padding: 2px 5px;
            border: 1px solid #acf;
            position: relative;
            left: 360px;
            top: 6px;
            cursor: pointer;
        }

        #dialog #content {
            background: #ee9;
            height: 370px;
            overflow: scroll;
        }
        #zzc {
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: #999;
            z-index: 99;
            display: none;
        }
    </style>
    <script type="text/javascript" src="../jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#dialog h1.title span").click(function(){
                $("#dialog").stop().fadeOut(1000);
                $("#zzc").css({display:"none"});
            })
            $("#diaBtn").click(function() {
                var url = $("#url").val();
                if (!url) {
                    url = "02.html";
                }
                $("#dialog").find("#content")
                    .load(url).end().fadeIn(1000);
                $("#zzc").css({
                    opacity:0.3,
                    display: "block"
                });
            });
        })
    </script>
</head>

<body>
    <div id="loadDialog">加载对话框
        <input type="text" id="url" />
        <input type="button" id="diaBtn" />
    </div>
    <div id="zzc"></div>

    <div>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
        <h1>我们自己定义的对话框</h1>
    </div>


    <div id="dialog">
        <h1 class="title"><span>关闭</span></h1>
        <div id="content"></div>
    </div>

</body>

</html>
